<!DOCTYPE html>

<style>
div>div{background:lime;width:100px;height:20px;border:1px solid green}
</style>

<script src="../../resources/js-test.js"></script>

<body style="width:700px;margin:0px">

<!-- Boxes with margin-left:auto inside the left-aligned LTR block should be right-aligned -->
<div dir="ltr">
  <div dir="rtl" id="rtl_ml_in_ltr" style="margin-left:auto"></div>
  <div dir="ltr" id="ltr_ml_in_ltr" style="margin-left:auto"></div>
</div>

<!--  Boxes with margin-right:auto inside the left-aligned LTR block should be left-aligned -->
<div dir="ltr">
  <div dir="rtl" id="rtl_mr_in_ltr" style="margin-right:auto"></div>
  <div dir="ltr" id="ltr_mr_in_ltr" style="margin-right:auto"></div>
</div>

<!-- Boxes with margin-left:auto inside the right-aligned RTL block should be right-aligned -->
<div dir="rtl">
  <div dir="rtl" id="rtl_ml_in_rtl" style="margin-left:auto"></div>
  <div dir="ltr" id="ltr_ml_in_rtl" style="margin-left:auto"></div>
</div>

<!-- Boxes with margin-right:auto inside the right-aligned RTL block should be left-aligned -->
<div dir="rtl">
  <div dir="rtl" id="rtl_mr_in_rtl" style="margin-right:auto"></div>
  <div dir="ltr" id="ltr_mr_in_rtl" style="margin-right:auto"></div>
</div>


<!-- Boxes with margin-left:auto inside the right-aligned LTR block should be right-aligned -->
<div dir="ltr" align="right">
  <div dir="rtl" id="rtl_ml_in_ltr_r" style="margin-left:auto"></div>
  <div dir="ltr" id="ltr_ml_in_ltr_r" style="margin-left:auto"></div>
</div>

<!-- Boxes with margin-right:auto inside the right-aligned LTR block should be left-aligned -->
<div dir="ltr" align="right">
  <div dir="rtl" id="rtl_mr_in_ltr_r" style="margin-right:auto"></div>
  <div dir="ltr" id="ltr_mr_in_ltr_r" style="margin-right:auto"></div>
</div>

<!-- Boxes with margin-left:auto inside the left-aligned RTL block should be right-aligned -->
<div dir="rtl" align="left">
  <div dir="rtl" id="rtl_ml_in_rtl_l" style="margin-left:auto"></div>
  <div dir="ltr" id="ltr_ml_in_rtl_l" style="margin-left:auto"></div>
</div>

<!-- Boxes with margin-right:auto inside the left-aligned RTL block should be left-aligned -->
<div dir="rtl" align="left">
  <div dir="rtl" id="rtl_mr_in_rtl_l" style="margin-right:auto"></div>
  <div dir="ltr" id="ltr_mr_in_rtl_l" style="margin-right:auto"></div>
</div>

<script>
  rtl_ml_in_ltr = document.getElementById("rtl_ml_in_ltr");
  ltr_ml_in_ltr = document.getElementById("ltr_ml_in_ltr");
  shouldBe("rtl_ml_in_ltr.getBoundingClientRect().right","700");
  shouldBe("ltr_ml_in_ltr.getBoundingClientRect().right","700");

  rtl_mr_in_ltr = document.getElementById("rtl_mr_in_ltr");
  ltr_mr_in_ltr = document.getElementById("ltr_mr_in_ltr");
  shouldBe("rtl_mr_in_ltr.getBoundingClientRect().left","0");
  shouldBe("ltr_mr_in_ltr.getBoundingClientRect().left","0");

  rtl_ml_in_rtl = document.getElementById("rtl_ml_in_rtl");
  ltr_ml_in_rtl = document.getElementById("ltr_ml_in_rtl");
  shouldBe("rtl_ml_in_rtl.getBoundingClientRect().right","700");
  shouldBe("ltr_ml_in_rtl.getBoundingClientRect().right","700");

  rtl_mr_in_rtl = document.getElementById("rtl_mr_in_rtl");
  ltr_mr_in_rtl = document.getElementById("ltr_mr_in_rtl");
  shouldBe("rtl_mr_in_rtl.getBoundingClientRect().left","0");
  shouldBe("ltr_mr_in_rtl.getBoundingClientRect().left","0");

  rtl_ml_in_ltr_r = document.getElementById("rtl_ml_in_ltr_r");
  ltr_ml_in_ltr_r = document.getElementById("ltr_ml_in_ltr_r");
  shouldBe("rtl_ml_in_ltr_r.getBoundingClientRect().right","700");
  shouldBe("ltr_ml_in_ltr_r.getBoundingClientRect().right","700");

  rtl_mr_in_ltr_r = document.getElementById("rtl_mr_in_ltr_r");
  ltr_mr_in_ltr_r = document.getElementById("ltr_mr_in_ltr_r");
  shouldBe("rtl_mr_in_ltr_r.getBoundingClientRect().left","0");
  shouldBe("ltr_mr_in_ltr_r.getBoundingClientRect().left","0");

  rtl_ml_in_rtl_l = document.getElementById("rtl_ml_in_rtl_l");
  ltr_ml_in_rtl_l = document.getElementById("ltr_ml_in_rtl_l");
  shouldBe("rtl_ml_in_rtl_l.getBoundingClientRect().right","700");
  shouldBe("ltr_ml_in_rtl_l.getBoundingClientRect().right","700");

  rtl_mr_in_rtl_l = document.getElementById("rtl_mr_in_rtl_l");
  ltr_mr_in_rtl_l = document.getElementById("ltr_mr_in_rtl_l");
  shouldBe("rtl_mr_in_rtl_l.getBoundingClientRect().left","0");
  shouldBe("ltr_mr_in_rtl_l.getBoundingClientRect().left","0");
</script>

</body>
